<template>
  <div id="pri" style="display: flex; flex-direction: column; display: none">
    <h5
      style="
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 14px;
        color: #333;
      "
    >
      结算信息
    </h5>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >订单实付</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >￥{{ orderData.order_amount }}</span
      >
    </div>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >付款方式</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-if="orderData.pay_type == 'wx'"
        >微信</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else-if="orderData.pay_type == 'zfb'"
        >支付宝</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else-if="orderData.pay_type == 'vip'"
        >会员</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else="orderData.pay_type == 'wx'"
        >现金</span
      >
    </div>
    <h5
      style="
        margin-top: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 14px;
        color: #333;
      "
    >
      会员信息
    </h5>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >会员姓名</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >-</span
      >
    </div>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >会员手机</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >-</span
      >
    </div>
    <h5
      style="
        margin-top: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 14px;
        color: #333;
      "
    >
      退款信息
    </h5>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >退款金额</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >￥{{ orderData.refund_amount }}</span
      >
    </div>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >付款方式</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-if="orderData.pay_type == 'wx'"
        >微信</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else-if="orderData.pay_type == 'zfb'"
        >支付宝</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else-if="orderData.pay_type == 'vip'"
        >会员</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        v-else="orderData.pay_type == 'wx'"
        >现金</span
      >
    </div>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >退款时间</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >{{ timestampToTime(orderData.refund_time) }}</span
      >
    </div>
    <div style="margin-top: 10px">
      <span
        style="
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999;
        "
        >退款编号</span
      >
      <span
        style="
          margin-left: 5%;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 13px;
          color: #333;
        "
        >{{ orderData.refund_sn }}</span
      >
    </div>
  </div>
  <div class="content-layout">
    <div class="header-layout">
      <div class="complete-title-layout">
        <img
          src="../../../../assets/images/order/ic_exit.png"
          alt=""
          srcset=""
        />
        <h5
          style="
            margin-left: 0.5vw;
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 17px;
            color: #333333;
          "
        >
          整单退款
        </h5>
      </div>
      <div class="info-layout">
        <div class="info-item-layout">
          <img src="../../../../assets/images/order/ic_order.png" />
          <p class="title">订单号</p>
          <p class="name">{{ orderData.sn }}</p>
        </div>
        <div class="info-item-layout">
          <img src="../../../../assets/images/order/ic_order_time.png" />
          <p class="title">下单时间</p>
          <p class="name">
            {{ timestampToTime(orderData.createtime as number) }}
          </p>
        </div>
      </div>
      <div class="info-layout">
        <div class="info-item-layout">
          <img src="../../../../assets/images/order/ic_cashier.png" />
          <p class="title">收银员</p>
          <p class="name">{{ orderData.cashier.name }}</p>
        </div>
        <div class="info-item-layout">
          <img src="../../../../assets/images/order/ic_pay_time.png" />
          <p class="title">支付时间</p>
          <p class="name">
            {{ timestampToTime(orderData.createtime as number) }}
          </p>
        </div>
      </div>
    </div>

    <div class="main-layout">
      <div class="left-layout">
        <div class="goods-infos-title-layout">
          <h5
            style="
              font-family: PingFang SC, PingFang SC;
              font-weight: 800;
              font-size: 14px;
              color: #333333;
            "
          >
            商品信息
          </h5>
          <h5
            class="number"
            style="
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
            "
          >
            共
            <span style="color: #fd6013">{{ orderData.item.length }}</span> 件
          </h5>
        </div>
        <el-scrollbar style="height: calc(100vh - 27vh); padding: 0px 15px">
          <div
            class="goods-item-layout"
            v-for="item in orderData.item"
            :key="item.id"
          >
            <img :src="item.goods_image" style="width: 68px; height: 68px" />
            <div class="goods-infos-layout">
              <p style="font-weight: 800; font-size: 14px; color: #333">
                {{ item.goods_title }}
              </p>
              <p style="font-weight: 400; font-size: 11px; color: #999">
                规格：{{ item.goods_sku_text }}
              </p>
              <div class="num-price">
                <span style="font-weight: 800; font-size: 14px; color: #333"
                  >x{{ item.goods_num }}</span
                >
                <span style="font-weight: 800; font-size: 14px; color: #333"
                  >￥{{ item.goods_price }}</span
                >
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <div class="right-layout">
        <div
          class="settlement-layout"
          style="height: calc(100vh - 31.5vh)"
          id="printArea"
        >
          <div style="padding: 15px">
            <h5
              style="
                font-family: PingFang SC, PingFang SC;
                font-weight: 800;
                font-size: 14px;
                color: #333333;
              "
            >
              结算信息
            </h5>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >订单实付</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >￥{{ orderData.order_amount }}</span
              >
            </div>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >付款方式</span
              >
              <div style="display: flex; justify-content: center">
                <el-image
                  v-if="orderData.pay_type == 'wx'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_wechat.png')"
                />
                <el-image
                  v-else-if="orderData.pay_type == 'zfb'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_alipay.png')"
                />
                <el-image
                  v-else-if="orderData.pay_type == 'vip'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_masonry.png')"
                />
                <el-image
                  v-else
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_cash.png')"
                />

                <span
                  v-if="orderData.pay_type == 'wx'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >微信</span
                >
                <span
                  v-else-if="orderData.pay_type == 'zfb'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >支付宝</span
                >
                <span
                  v-else-if="orderData.pay_type == 'vip'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >会员</span
                >
                <span
                  v-else
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >现金</span
                >
              </div>
            </div>
          </div>
          <div style="padding: 5px 15px">
            <h5
              style="
                font-family: PingFang SC, PingFang SC;
                font-weight: 800;
                font-size: 14px;
                color: #333333;
              "
            >
              会员信息
            </h5>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >会员姓名</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >-</span
              >
            </div>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >会员手机</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >-</span
              >
            </div>
          </div>

          <div style="padding: 15px 15px">
            <h5
              style="
                font-family: PingFang SC, PingFang SC;
                font-weight: 800;
                font-size: 14px;
                color: #333333;
              "
            >
              退款信息
            </h5>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >退款金额</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >￥{{ orderData.refund_amount }}</span
              >
            </div>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >付款方式</span
              >
              <div style="display: flex; justify-content: center">
                <el-image
                  v-if="orderData.pay_type == 'wx'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_wechat.png')"
                />
                <el-image
                  v-else-if="orderData.pay_type == 'zfb'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_alipay.png')"
                />
                <el-image
                  v-else-if="orderData.pay_type == 'vip'"
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_masonry.png')"
                />
                <el-image
                  v-else
                  style="width: 15px; height: 15px; margin: auto 5px auto 0px"
                  :src="getImageUrl('ic_cash.png')"
                />

                <span
                  v-if="orderData.pay_type == 'wx'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >微信</span
                >
                <span
                  v-else-if="orderData.pay_type == 'zfb'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >支付宝</span
                >
                <span
                  v-else-if="orderData.pay_type == 'vip'"
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >会员</span
                >
                <span
                  v-else
                  style="
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 13px;
                    color: #333;
                  "
                  >现金</span
                >
              </div>
            </div>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >退款时间</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >{{ timestampToTime(orderData.refund_time) }}</span
              >
            </div>
            <div class="settlement">
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 13px;
                  color: #999;
                "
                >退款编号</span
              >
              <span
                style="
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 800;
                  font-size: 13px;
                  color: #333;
                "
                >{{ orderData.refund_sn }}</span
              >
            </div>
          </div>
        </div>
        <div class="bottom-layout">
          <el-button
            size="small"
            plain
            @click="handleClick"
            style="
              background-color: #fd6013;
              width: 93px;
              height: 33px;
              color: #fff;
              font-weight: 400;
              border: none;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
            "
            >打印</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getLodop } from "../../../../utils/LodopFuncs.js";
import { onMounted, ref, watch } from "vue";
import { reqGetOrderDetails } from "../../../../api/order/index";
import { useRoute } from "vue-router";
let route = useRoute();
const orderData = ref<any>({ cashier: {}, item: [] });
const printObj = ref({
  id: "printArea",
  preview: false,
  popTitle: "小票打印",
});

const handleClick = () => {
  nextTick(() => {
    printPdf();
  });
};

const printPdf = () => {
  let LODOP = getLodop();
  if (!LODOP) {
    console.error("");
    return;
  }
  LODOP.SET_LICENSES(
    "",
    "152A06E8F6CBD6AC1F213ABFCB0D8604",
    "C94CEE276DB2187AE6B65D56B3FC2848",
    ""
  );

  LODOP.PRINT_INIT("标签");
  LODOP.SET_PRINT_STYLE("FontSize", 16);
  LODOP.SET_PRINT_STYLE("Bold", 1);

  LODOP.SET_PRINT_PAGESIZE(3, 1200, 0, "");
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1980, 2870, "");

  let printHtml = document.getElementById("pri")?.innerHTML;
  if (!printHtml) {
    console.error("1");
    return;
  }
  // LODOP.ADD_PRINT_TEXT(20, 30, 350, 30, test.value);
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 9); //对纯文本1设置为字体大小11
  // LODOP.ADD_PRINT_TEXT(50, 30, 350, 30, test1.value);
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); //对纯文本1设置为字体大小11
  // LODOP.SET_PRINT_STYLE("Underline", 1); //对后面两个text加下划线
  LODOP.ADD_PRINT_HTM(12, 12, 1980, 2870, printHtml);
  // LODOP.ADD_PRINT_BARCODE(15, 0, 295, 50, "128B", "12345678123");
  // LODOP.ADD_PRINT_BARCODE(80, 45, 280, 30, "128B", "123456789112345");
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 5);
  LODOP.SET_PRINT_STYLEA(0, "QRCodeErrorLevel", "M");
  LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);

  LODOP.PRINT();
  // LODOP.PRINT_DESIGN();
  // LODOP.PREVIEW();
};

/**
 * @动态本地图片
 */
function getImageUrl(url: any) {
  const path = new URL(
    `../../../../assets/images/order/${url}`,
    import.meta.url
  );
  return path.href;
}

/**
 * @时间转换
 */
const timestampToTime = (timestamp: number) => {
  let date = new Date(timestamp * 1000);
  let Y = date.getFullYear() + "-";
  let M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  let h =
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  let m =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
};

onMounted(() => {
  getOrderDetails();
});

const getOrderDetails = async () => {
  const id: any = route.query.id;
  let result = await reqGetOrderDetails(id, { code: "vX7kYhyEVqOcFWJn" });
  if (result.code == 1) {
    orderData.value = result.data;
  }
};

function nextTick(arg0: () => void) {
  throw new Error("Function not implemented.");
}
</script>

<style lang="scss" scoped>
.content-layout {
  height: 100%;

  .header-layout {
    height: 95px;
    background: url("../../../../assets/images/order/order_status_exit_bg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    .complete-title-layout {
      display: flex;
      flex-direction: row;
      flex: 1.5;
      align-items: center;

      img {
        width: 22px;
        height: 22px;
        margin-left: 25px;
      }
    }

    .info-layout {
      flex: 1.2;

      .info-item-layout {
        display: flex;
        flex-direction: row;
        margin-bottom: 0.5vw;
        margin-top: 0.5vw;
        align-items: center;

        img {
          width: 17px;
          height: 17px;
        }

        .title {
          width: 4vw;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 11px;
          color: #999999;
          margin-left: 5px;
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 11px;
          color: #333333;
        }
      }
    }
  }

  .main-layout {
    display: flex;
    flex-direction: row;
    margin-top: 1.5vh;

    .left-layout {
      flex: 1;
      background-color: white;
      border-radius: 6px;

      .goods-infos-title-layout {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 15px 0 15px;
      }

      .goods-item-layout {
        display: flex;
        flex-direction: row;
        border-bottom: 0.5px #e6e8eb solid;
        padding: 10px 0px;

        .goods-infos-layout {
          width: 100%;
          height: 5vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10px;

          .num-price {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
        }
      }
    }

    .right-layout {
      flex: 1;
      margin-left: 1.5vh;
      background-color: white;
      border-radius: 6px;

      .settlement {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 17px;
      }

      .bottom-layout {
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 67px;
        align-items: center;
        border-top: 0.5px #e6e8eb solid;
        padding: 0px 10px;
      }
    }
  }
}
</style>
